<template>
  <div class="systemCommunity">
    <!-- 顶部搜索栏 -->
    <div class="screenContent">
      <div class="screenNav">
        <div class="scrTop">
          <div class="labItem">
            <div class="label">角色名称：</div>
            <div class="labScach">
              <input v-model="title" placeholder="请输入需要查询的角色名称" @input="getInput()" />
            </div>
          </div>
          <div class="btn success" @click="addAuthGroupDialog = true">
            <span>添加</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="tableCont">
      <el-table v-loading="loadingFindRole" :data="localDtAuthGroupVoList" :header-cell-style="{ color: '#999' }" :cell-style="{ color: '#35353F' }" style="width: 100%">
        <el-table-column align="center" label="序号" type="index" width="180">
          <template #default="scope">
            <span>{{ scope.$index + (page - 1) * limit + 1 }} </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="title" label="角色名称" :show-overflow-tooltip="true" />
        <el-table-column align="center" prop="size" label="账户数" />
        <el-table-column align="center" prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column align="center" label="操作" fixed="right" width="200">
          <template #default="scope">
            <span class="spanBtn color1" @click="editName(scope.row.id)">编辑</span>
            <span class="spanBtn color2" @click="editRoule(scope.row.id)">授权</span>
            <span class="spanBtn color3" v-if="scope.row.status == 1" @click="updateAuthStatus(scope.row.id, 0, scope.row.size)">删除</span>
            <span style="color: #3f9005" class="spanBtn color3" v-if="scope.row.status == 0" @click="updateAuthStatus(scope.row.id, 1)">恢复</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <!-- 分页 -->
        <el-pagination background layout="total, prev, pager, next, jumper" :total="parseInt(total)" @size-change="findAllAuthGroup" @current-change="findAllAuthGroup" />
      </div>
    </div>

    <!-- 添加角色名称窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="addAuthGroupDialog" :show-close="false" width="350px">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">添加角色</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel">
        <div class="labelItem">
          <div class="term">
            <div class="label">角色名称</div>
            <div><el-input size="large" v-model="addAuthGroupName" placeholder="请输入需要添加的角色名称" clearable /></div>
          </div>
        </div>
        <div class="labelBtn">
          <div class="btn default" @click="addAuthGroupDialog = !addAuthGroupDialog">取消</div>
          <div class="btn info" @click="addAuthGroup">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 编辑角色名称窗口 -->
    <el-dialog :close-on-click-modal="false" v-model="userNameShow" :show-close="false" width="350px">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">编辑</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel">
        <div class="labelItem">
          <div class="term">
            <div class="label">角色名称</div>
            <div>
              <el-input size="large" v-model="name" placeholder="请输入需要更换的角色名称" clearable />
            </div>
          </div>
        </div>
        <div class="labelBtn">
          <div class="btn default" @click="userNameShow = !userNameShow">取消</div>
          <div class="btn info" @click="updateAuthName">确定</div>
        </div>
      </div>
    </el-dialog>

    <!-- 角色权限分配窗口tree树 -->
    <el-dialog :close-on-click-modal="false" v-model="userRoleTreeShow" :show-close="false" width="330px">
      <template #header="{ close, titleId, titleClass }">
        <div class="myDialogHeader">
          <span :id="titleId" :class="titleClass">授权</span>
          <div class="close">
            <close @click="close" theme="outline" size="20" fill="#666" />
          </div>
        </div>
      </template>
      <div class="fromLabel">
        <el-tree
          ref="treeRef"
          :data="findTreeOutRuleList"
          :props="defaultProps"
          node-key="ruleId"
          :default-expanded-keys="[6, 1]"
          :default-checked-keys="arr"
          show-checkbox
          check-strictly="false"
          :current-change="ruleId"
        />
        <div class="labelBtn">
          <div class="btn default" @click="userRoleTreeShow = !userRoleTreeShow">取消</div>
          <div class="btn info" @click="getCheckedNodes()">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
const defaultProps = {
  children: 'list',
  label: 'ruleTitle',
  disabled: 'disabled',
}
export default {
  data() {
    return {
      title: '',
      limit: 10,
      page: 1,
      total: 0,
      localDtAuthGroupVoList: [],
      loadingFindRole: false,
      addAuthGroupDialog: false,
      userNameShow: false,
      userRoleTreeShow: false,
      defaultProps,
      input1: '',
      input: '',
      value: '',
      value1: '',
      name: '',
      id: '',
      addAuthGroupName: '',
      findTreeOutRuleList: [],
      ruleId: '',
      roleId: '',
      timeOut: {},
      arr: [],
    }
  },
  mounted() {
    this.findAllAuthGroup()
    this.findTreeOutRule()
  },
  methods: {
    getInput() {
      if (this.timeOut != null) {
        clearTimeout(this.timeOut)
        this.timeOut = null
      }
      this.timeOut = setTimeout(() => {
        this.findAllAuthGroup()
      }, 1000)
    },
    // 获取选中的权限节点
    getCheckedNodes() {
      let selectArr = this.$refs.treeRef.getCheckedNodes(false, true)
      if (!selectArr || selectArr.length < 1) {
        this.$message({
          type: 'error',
          message: '请选择至少一个权限',
        })
        return
      }
      let selectIdArr = []
      selectArr.forEach((item) => {
        selectIdArr.push(item.ruleId)
      })
      let selectId = selectIdArr.join(',')
      this.ruleId = selectId
      this.updateRulesByRole()
    },
    // 打开编辑名称窗口
    editName(id) {
      this.userNameShow = true
      this.id = id
      this.findRoleById()
    },
    //编辑名称
    updateAuthName() {
      if (!this.name || this.name === ' ') {
        this.$message({
          type: 'error',
          message: '角色名称不能为空',
        })
        return
      }
      this.$http
        .post('/axh/dtAuthGroup/updateAuthName', {
          name: this.name,
          id: this.id,
        })
        .then((res) => {
          this.name = ''
          this.$message({
            type: 'success',
            message: res.msg,
          })
          this.findAllAuthGroup(this.page)
          this.userNameShow = false
        })
    },
    // 设置用户权限
    editRoule(id) {
      this.userRoleTreeShow = !this.userRoleTreeShow
      this.id = id
      this.findRuleByRole(id)
    },
    //获取角色信息
    findAllAuthGroup(page = 1) {
      this.loadingFindRole = true
      if (page && page > 0) {
        this.page = parseInt(page)
      }
      this.$http
        .post('/axh/dtAuthGroup/findAllAuthGroup', {
          name: this.title,
          page: this.page,
          limit: this.limit,
        })
        .then((res) => {
          if (res) {
            this.localDtAuthGroupVoList = res.localDtAuthGroupVoList
            this.total = res.total
            if (this.timeOut != null) {
              clearTimeout(this.timeOut)
              this.timeOut = null
            }
            this.timeOut = setTimeout(() => {
              this.loadingFindRole = false
            }, 20)
          }
        })
    },
    //新增角色信息
    addAuthGroup() {
      if (!this.addAuthGroupName || this.addAuthGroupName === ' ') {
        this.$message({
          type: 'error',
          message: '角色名称不能为空',
        })
        return
      }
      this.$http
        .post('/axh/dtAuthGroup/addAuthGroup', {
          title: this.addAuthGroupName,
        })
        .then((res) => {
          this.title = ''
          this.$message({
            type: 'success',
            message: res.msg,
          })
          this.addAuthGroupDialog = false
          this.findAllAuthGroup()
        })
    },
    //修改角色状态
    updateAuthStatus(id, status, size) {
      let text = '当前角色绑定账户数为：' + size + '，请确认是否删除？'
      this.$confirm(text, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$http
            .post('/axh/dtAuthGroup/updateAuthStatus', {
              status: status,
              id: id,
            })
            .then((data) => {
              this.$message({
                type: 'success',
                message: data.msg,
              })
              this.findAllAuthGroup(this.page)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消操作',
          })
        })
    },
    //查询出树状图样的权限名称与id
    findTreeOutRule() {
      this.$http.post('/axh/authRule/findTreeOutRule', {}).then((res) => {
        this.findTreeOutRuleList = res.result
      })
    },
    //根据角色id关联权限
    updateRulesByRole() {
      if (!this.ruleId) {
        this.$message({
          type: 'error',
          message: '请选择关联权限',
        })
        return
      }
      this.$http
        .post('/axh/authRule/updateRulesByRole', {
          id: this.id,
          ruleId: this.ruleId,
        })
        .then((res) => {
          this.$message({
            type: 'success',
            message: '授权成功',
          })
          this.findAllAuthGroup(this.page)
          this.userRoleTreeShow = false
        })
    },
    //根据角色id查询其权限id
    findRuleByRole(id) {
      this.$http
        .post('/axh/authRule/findRuleByRole', {
          id: id,
        })
        .then((res) => {
          if (res.findRuleByRoleVo && res.findRuleByRoleVo.ruleId) {
            this.$refs.treeRef.setCheckedKeys(res.findRuleByRoleVo.ruleId.split(','), false)
          } else {
            this.$refs.treeRef.setCheckedKeys([], false)
          }
        })
    },
    //根据角色id查询其信息
    findRoleById() {
      this.$http
        .post('/axh/dtAuthGroup/findRoleById', {
          id: this.id,
        })
        .then((res) => {
          this.name = res.result.title
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.systemCommunity {
  padding: 20px;
}
.screenContent {
  display: flex;
  margin-bottom: 20px;
  .screenNav {
    flex: 1;
    width: 0;
    background-color: $colorFFFFFF;
    border-radius: 4px;
    padding: 16px;
    height: 72px;
    .scrTop {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .labItem {
        margin-right: 30px;
        display: flex;
        align-items: center;
        .label {
          margin-right: 6px;
        }
        .labScach {
          flex: 1;
          width: 0;
          min-width: 320px;
        }
        &:nth-last-child(1) {
          margin-right: 0;
        }
      }
      .success {
        width: 108px;
        .btnIcon {
          margin-left: 5px;
        }
      }
    }
  }
}
.tableCont {
  background-color: $bgColorFFFFFF;
  border-radius: 4px;
  overflow: hidden;
  .spanBtn {
    cursor: pointer;
    padding-right: 12px;
  }
}
.labelItem {
  margin-bottom: 10px;
}
</style>